<template>
  <div class="step">
    <flow>
      <flow-state title="验证房源" is-done></flow-state>
      <flow-line is-done></flow-line>

      <flow-state title="房屋信息" is-done></flow-state>
      <flow-line is-done></flow-line>

      <flow-state title="出租信息" is-done></flow-state>
      <flow-line ></flow-line>
      <flow-state title="选择合同" is-done></flow-state>
      <flow-line></flow-line>

      <flow-state title="发布房源"></flow-state>
    </flow>
    <div class="divide-padding"></div>
    <div class="house-item" >
      <div  class="view">合同选择</div>
      <checklist :options="inlineDescList" :min="1" :max="1" v-model="inlineDescListValue" @on-change="change"></checklist>
    </div>
    <div class="contractView">
       <div class="divide"></div>
      <span class="view">合同预览 </span>
      <div class="divide"></div>
      <div class="contract" id="chooseContractDetailsWrap">
        <div id="chooseContractDetails" v-html="currentDetails"></div>
      </div>
      <div class="house-set-btn">
      <x-button class="btn" type="primary" @click.native="nextStep">下一步</x-button>
      </div>
    </div>
    
  </div>
</template>
<script>
import { Checklist } from 'vux'
import houseContract from '@/components/houseContract'
export default {
  components: {
    Checklist,
    houseContract
  },
  data () {
    return {
      contractData: [],
      inlineDescList: [],
      inlineDescListValue: [],
      currentDetails: ''
    }
  },
  created () {
    // 获取编辑的房源数据
    let houseId = this.$route.query.id
    if (houseId) {
      this.$axiosPosting(this.$api.getMyHouseById, {houseId: houseId}).then((res = {}) => {
        if (res.code === '0000') {
          let resData = res.data || {}
          let { icontractTemplateId } = resData
          this.rentInfo.inlineDescListValue = [icontractTemplateId]
        }
      })
    }
    // 获取合同列表
    this.getContract()
  },
  methods: {
    nextStep () {
      if (this.beforeSubmit()) {
        let pubishHouseData = JSON.parse(window.localStorage.pubishHouseData || '{}')
        let contractTemplateId = this.inlineDescListValue.toString()
        let localData = {
          ...pubishHouseData,
          contractTemplateId
        }
        this.$axiosPosting(this.$api.updateNewContractTemplateByFrequency, {id: contractTemplateId}).then(res => {
          if (res.code === '0000') {
            localStorage.setItem('pubishHouseData', JSON.stringify(localData))
            this.$router.push({path: './houseDesc', query: {id: this.$route.query.id}})
          }
        })
      }
    },
    change () {
      this.contractData.forEach((item, index) => {
        if (item.id === this.inlineDescListValue[0]) {
          this.currentDetails = item.content
        }
        document.getElementById('chooseContractDetailsWrap').scrollTop = 0
      })
    },
    getContract () {
      this.$axiosPosting(this.$api.queryNewContractTemplateByType, {}).then(res => {
        if (res.code === '0000') {
          this.contractData = res.data
          this.inlineDescList = this.contractData.map((item, index) => {
            let newItem = {}
            newItem.key = item.id
            newItem.value = item.name
            newItem.inlineDesc = item.description
            newItem.content = item.content
            return newItem
          })
          if (this.inlineDescList.length > 0) {
            this.inlineDescListValue.push(this.inlineDescList[0].key)
          }
        }
      })
    },
    beforeSubmit () {
      if (this.inlineDescListValue.length === 0) {
        this.$vux.toast.text('请选择合同')
        return false
      } else {
        return true
      }
    }
  }
}
</script>
<style lang="less">
  .house-rent-style{
    display: flex;
  }
   .weui-check_label{
     border-top: 3px solid white!important;
   }
  //  .weui-cells{
  //     width: 100%!important;
  //   }
  //  .weui-cell{
  //    margin-bottom: 18px;
  //  }
  //  .weui-cells:after{
  //    border: none!important;
  //   }
  .divide-padding{
    height:0.3rem;
    background: #f2f5fb;
  }

  .view{
    display: block;
    line-height: 2.4rem;
    font-size: 1rem;
    margin-top: 10px;
    &::before{
      content: '';
      margin-right: 15px;
      border-left: 3px solid red;
    }
  }
  .divide{
    border-bottom: 1px solid #f2f5fb;
  }
  .contentBox{
     line-height: 1.4;
     text-indent: 1.25rem;
     font-size:0.8rem;
   }
   .house-set-btn{
    display: flex;
    margin-top: 1.6rem;
    margin-bottom: 0.5rem;
    padding: 0 0.75rem;
    .btn{
      background: #169bd5;
      height: 2.5rem;
    }
   }
   .contract{
     width: 94%;
     margin-left: auto;
     margin-right: auto;
     height: 300px;
     overflow: auto;
     border: 1px solid #f2f5fb;
   }
   .choose{
     position: relative;
     top: -88px;
     color: #999999;
     margin-left: 13%;
   }
   .contract2{
     top: -40px;
   }
  //  .contractView{
  //    margin-top: -35px;
  //  }
</style>
